<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #f {
            display: inline-block;
            color: deeppink;
        }
    </style>
</head>
<body>
本次发放的水果是：<span id="f"></span>
<button type="button" onclick="fruit()">点击随机发放水果</button>
<script>
    /**
     * 3、模拟随机发放水果功能，水果品种固定，每次只发放一种并输出您获得的水果是XX
     * var fruits = ["苹果" ,"香蕉","梨子","西瓜","火龙果","芒果","荔枝"];
     */

    function fruit() {
        var fruits = ["苹果", "香蕉", "梨子", "西瓜", "火龙果", "芒果", "荔枝"];
        var num = Math.ceil(Math.random() * fruits.length) - 1;
        document.getElementById("f").innerHTML = fruits[num];
    }
</script>
</body>
</html>